<template>
  <div class="GasWebNaturalGasCavansGif">
    <canvas class="star_canvas" ref="star_canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "GasWebNaturalGasCavansGif",

  data() {
    return {
      timer: null,
      ctx: null,
      starArr: [], // 点的数组
      mouse_star: {}, // 鼠标star
      limitLen: 100, // 连接所需最短距离
      dotTotal: 100, // 点的个数
      color: "#333", // 字体颜色
    };
  },

  mounted() {
    this.initCanvas();
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    initCanvas() {
      this.canvas_init(); // 画布初始化
      this.star_init(); // 所有点初始化
      this.mouseStar_init(); // 鼠标点始化
      this.mouseEvent_init(); // 鼠标事件
      this.timer_init(); //定时器初始化
    },

    canvas_init() {
      this.ctx = this.$refs.star_canvas.getContext("2d");
    },

    star_init() {
      for (let i = 0; i < this.dotTotal; i++) {
        let star = this.generateStar();
        this.starArr.push(star);
      }
    },

    timer_init() {
      this.timer = setInterval(() => {
        const width = window.screen.width;
        const height = window.screen.height;
        this.$refs.star_canvas.width = width;
        this.$refs.star_canvas.height = height;
        this.ctx.clearRect(0, 0, width, height);

        // 鼠标star移动
        this.Draw(this.ctx, this.mouse_star);

        // star移动
        this.starArr.forEach((star) => {
          this.Draw(this.ctx, star);
          this.Move(star);
        });

        // 比较star和所有其他star的距离，小于100连线
        this.starArr.forEach((star, index) => {
          for (let i = index + 1; i < this.starArr.length; i++) {
            if (
              Math.abs(star.x - this.starArr[i].x) < this.limitLen &&
              Math.abs(star.y - this.starArr[i].y) < this.limitLen
            ) {
              this.DrawLine(
                star.x,
                star.y,
                this.starArr[i].x,
                this.starArr[i].y,
                this.ctx
              );
            }
          }
        });

        // 比较鼠标star和所有star的距离
        for (let i = 0; i < this.starArr.length; i++) {
          if (
            Math.abs(this.mouse_star.x - this.starArr[i].x) < this.limitLen &&
            Math.abs(this.mouse_star.y - this.starArr[i].y) < this.limitLen
          ) {
            this.DrawLine(
              this.mouse_star.x,
              this.mouse_star.y,
              this.starArr[i].x,
              this.starArr[i].y,
              this.ctx
            );
          }
        }
      }, 20);
    },

    mouseStar_init() {
      this.mouse_star = this.generateStar();
    },

    mouseEvent_init() {
      // 鼠标移动 star跟随移动
      this.$refs.star_canvas.onmousemove = (e) => {
        this.mouse_star.x = e.offsetX;
        this.mouse_star.y = e.offsetY;
      };
      // 鼠标点击 添加star
      this.$refs.star_canvas.onclick = (e) => {
        this.starArr.splice(0, 5);
        for (let i = 0; i < 5; i++) {
          let star = this.generateStar();
          star.x = e.offsetX;
          star.y = e.offsetY;
          this.starArr.push(star);
        }
      };
    },

    generateStar() {
      const width = window.screen.width;
      const height = window.screen.height;
      const star = {
        x: 0,
        y: 0,
        r: 0,
        speedX: 0,
        speedY: 0,
      };
      star.x = Math.random() * width;
      star.y = Math.random() * height;
      star.r = Math.random() * 5;
      star.speedX = this.randomSpeed();
      star.speedY = this.randomSpeed();
      return star;
    },

    randomSpeed() {
      return Math.random() * 3 * Math.pow(-1, Math.round(Math.random()));
    },

    Draw(ctx, star) {
      ctx.fillStyle = this.color;
      ctx.strokeStyle = this.color;
      ctx.beginPath();
      ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    },

    Move(star) {
      const width = window.screen.width;
      const height = window.screen.height;
      star.x -= star.speedX;
      star.y -= star.speedY;
      if (star.x < 0 || star.x > width) {
        star.speedX *= -1;
      }
      if (star.y < 0 || star.y > height) {
        star.speedY *= -1;
      }
    },

    DrawLine(startX, startY, endX, endY, ctx) {
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(endX, endY);
      ctx.stroke();
      ctx.closePath();
    },
  },
};
</script>

<style lang="scss" scoped>
.GasWebNaturalGasCavansGif {
  width: 100%;
  .star_canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
}
</style>